<template>
  <div class="waterLineBox" ref="box">
      <div class="waterLineBox_content">
        <div class="waterLineBoxItem" v-for="i in 300" :key="i">
          <div>→</div>
          <div>→</div>
          <div>→</div>
        </div>
      </div>
  </div>
  <div class="music">
    <div class="music_container">
      <div class="music_container_item"></div>
      <div class="music_container_item"></div>
      <div class="music_container_item"></div>
      <div class="music_container_item"></div>
    </div>
  </div>
</template>
<script setup>
const holdOn = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1111);
      resolve()
    },1000)
  })
}
// eslint-disable-next-line no-constant-condition
if(1 < 0){
  console.log(111);
}else{
  console.log(222);

  holdOn()
}
console.log(333);

</script>

<style scoped lang="scss">

.music{
  &_container{
    width:50px;
    height:50px;
    display: flex;
    justify-content: space-between;
    transform: rotate(180deg);
    &_item{
      width: 10px;
      background: #4AA5A6;
      animation: music 1s linear infinite;
      &:nth-child(1){
        animation-delay: 0s;
      }
      &:nth-child(2){
        animation-delay: .3s;
      }
      &:nth-child(3){
        animation-delay: .6s;
      }
      &:nth-child(4){
        animation-delay: 1s;
      }
    }
  }
}
@keyframes music {
  0%{
    height:20px;
  }
  50%{
    height:50px;
  }
  100%{
    height:20px;
  }
}


.waterLineBox{
  width: 800px;
  height:40px;
  border-top:2px solid #bbb;
  border-bottom:2px solid #bbb;
  overflow: hidden;
  &_content{
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    height:36px;
    overflow: hidden;
    position: relative;
    align-content: flex-start;
    .waterLineBoxItem{
      padding:18px 40px;
      line-height: 30px;
      background: transparent;
      border-radius: 80% 90%;
      position: relative;
      top:0;
      z-index: 10;
      div{
        width: 100%;
        height:100%;
        background: #739fe0;
        position: absolute;
        top:0;
        left:0;
        border-radius: 80% 90%;
        &:nth-child(1){
          animation: translate1 1s linear infinite;
        }
        &:nth-child(2){
          animation: translate2 1s linear infinite;
        }
        &:nth-child(3){
          animation: translate3 1s linear infinite;
        }
      }
    }
  }
}
@keyframes translate1 {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(-50%);
  }
}
@keyframes translate2 {
  from{
    transform: translateX(-50%);
  }
  to{
    transform: translateX(0%);
  }
}
@keyframes translate3 {
  from{
    transform: translateX(0%);
  }
  to{
    transform: translateX(50%);
  }
}
</style>